<template>
  <view class="login">
    <!-- login -->
    <image :src="img" class="logo"></image>
    <!-- 标题 -->
    <view class="title">
      <text class='main'>开始落雨</text>
      <text>忘记密码?</text>
    </view>
    <!-- 账号 -->
    <view class="box">
      <view class="box1">
        <input class="uni-input" @input="onKeyInput" placeholder="用户名或邮箱" />
      </view>
      <view class="box1">
        <input class="uni-input" @input="onPasInput" password placeholder="密码" />
      </view>
    </view>
    <view class="loginx" @click="login">
      <text>登录</text>
      </view>
    <!-- 提示 -->
    <view class="top">
      <label class="radio">
        <radio :value="radio"  @click="changeR"/>
        <text>已阅读并同意协议</text>
      </label>
    </view>
  </view>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        img:'https://img0.baidu.com/it/u=1192498711,2158737905&fm=253&fmt=auto&app=120&f=JPEG',
        radio:false,
        info : {
          name: '',
          pass:'',
          avator: 'https://img1.baidu.com/it/u=4188500822,3869319195&fm=253&fmt=auto&app=138&f=JPEG',
          myMessage: 3,
          myInform: 8,
          sex : true, 
          IP:'甘肃'
        }
      };
    },
    methods:{
      ...mapMutations('m_user',['updateUserInfo']),
      onKeyInput(event) {
          this.info.name = event.target.value
      },
      
      onPasInput(event){
        this.info.pass  = event.target.value
      },
      changeR(){
        this.radio = !this.radio
      },
      login() {
        if(!this.radio) return uni.$showMsg('请同意协议！')
        if(!this.info.name.length || !this.info.pass.length) return uni.$showMsg('请输入完毕！')
        console.log('来啦')
        console.log(this.info) 
        this.updateUserInfo(this.info)
        // uni.redirectTo({
        //     //保留当前页面，跳转到应用内的某个页面
        //     url: '/pages/my/my'
        // })
        uni.switchTab({
          url:'/pages/my/my'
        })
      }
    }
  }
</script>

<style lang="scss">
  .login {
    margin: 0 20px;
    padding: 20px 0;
    align-items: center;
    text-align: center;
  }
.logo {
  display: flex;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 45%;
}
.title {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: gray;
  .main {
    font-size: 20px;
    font-weight: bold;
    color: black;
  }
}
.box {
  padding: 0 100rpx;
  margin: 100rpx 0;
  .box1 {
    .uni-input {
      height: 70rpx;
      width: 100%;
      border: 1px solid gray;
      padding-left: 10rpx;
      border-radius: 10px;
      margin: 20rpx 0;
    }
  }
}
.loginx {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 70rpx;
  text {
    width: 70%;
    height: 100%;
    background-color: black;
    line-height: 70rpx;
  }
}
.top {
  margin: 20rpx 0;
}
</style>
